<template>
    <view class="pf-100 df-col base-page" :style="{ backgroundColor: bgColor }">
        <!-- #ifdef H5 -->
        <view v-if="downloadType">
            <download-app></download-app>
        </view>
        <!-- #endif -->

        <!-- <Authorization></Authorization> -->
        <ns-login ref="login"></ns-login>

        <slot name="header"></slot>
        <view class="center">
            <scroll-view scroll-y="true" class="height-100" :upper-threshold="scrollOptions.upperThreshold" :lower-threshold="scrollOptions.lowerThreshold" @scrolltoupper="upperFn" @scrolltolower="lowerFn" @scroll="scrollFn" v-if="canvasShow==false">
                <slot name="center"></slot>
            </scroll-view>
            <slot name="center" v-else></slot>
        </view>
        <slot name="below"></slot>
        <view class="bottom" v-if="tabShow&&!isApp">

            <!-- add-action 往上凸半圆形状 -->
            <view class="cu-bar tabbar bg-white">
                <diy-bottom-nav :pageTabShow='true'></diy-bottom-nav>
                <!--  <view class="action " v-for="(item, inx) in tabArr" :key="inx" :class="inx == tabInx ? 'tar-ativer' : ''" @click="actionBtn(item)">
                    <block v-if="item.icon || item.img">
                        <view :class="item.icon" v-if="!item.img"></view>
                    </block>
                    <view class="tabbar-title">{{ item.title || '' }}</view>
                </view> -->
            </view>
        </view>
    </view>
</template>

<script>
import DownloadApp from './download-app.vue'
import Authorization from './Authorization.vue'
import {
	mapGetters
} from 'vuex'
const debounce = (func, wait) => {
	let timeout = ''
	return (v) => {
		if (timeout) {
			clearTimeout(timeout)
		}
		timeout = setTimeout(() => {
			func(v)
		}, wait)
	}
}
export default {
	data() {
		return {
			isApp: false,
			aa: 1
		}
	},
	props: {
		// 背景颜色类名
		tabArr: {
			type: Array,
			default: () => {
				return [{
					title: '醒醒',
					icon: '',
					imgmin: '',
					path: '/pages/index/index',
					auto: true
				},
				{
					title: '逛逛',
					icon: '',
					imgmin: '',
					path: '/pages/discover/discover',
					auto: true
				},
				{
					title: '聊聊',
					icon: '',
					imgmin: '',
					path: '/chatPages/index/index',
					auto: true
				},
				{
					title: '我的',
					icon: '',
					imgmin: '',
					path: '/shopPages/my/index',
					auto: true
				}
				]
			}
		},
		canvasShow: {
			type: Boolean,
			default: false
		},
		// 是否显示tab栏
		tabShow: {
			type: Boolean,
			default: false
		},
		// tab栏所在的索引
		tabInx: {
			type: Number,
			default: 0
		},
		// 滚动组件配置
		scrollOptions: {
			type: Object,
			default: () => {
				return {
					upperThreshold: 50, // 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
					lowerThreshold: 50 // 距底部/右边多远时（单位px），触发 scrolltolower 事件
				}
			}
		},
		bgColor: {
			type: String,
			default: '#ffffff'
		},
		bgImg: {
			type: String,
			default: ''
		},
		downloadType: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		...mapGetters(['isVerify', 'shouquan'])
	},
	components: {
		DownloadApp,
		Authorization
	},
	watch: {
		'$store.state.shouquan': {
			handler(newVal) {
				this.showLogin({ vm: this, val: newVal })
			}
		}
	},
	mounted() {
		// #ifdef H5
		this.isApp = this.isNativeApp()
		// #endif
	},
	methods: {
		showLogin: debounce(({ vm, val }) => {
			if (val) {
				vm.$refs.login.open()
			}
		}, 300),
		actionBtn(val) {
			// console.log(val)
			// 目前提示用户
			// // #ifdef MP-WEIXIN
			// if (val.title == '逛逛') {
			// 	if (this.isVerify == 0) {
			// 		this.$Utils.tip('暂未开放，敬请期待~~~');
			// 		return false;
			// 	}
			// }
			// // #endif
			let routes = getCurrentPages() // 获取当前打开过的页面路由数组
			let curRoute = '/' + routes[routes.length - 1].route // 获取当前页面路由
			if (curRoute != val.path) {
				if (val.auto) {
					this.$Router.reLaunch({
						path: val.path
					})
				} else {
					if (!this.$Utils.isLoginCall()) return false
					this.$Router.reLaunch({
						path: val.path
					})
				}
			}
		},
		// 滚到顶部
		upperFn(e) {
			// console.log('page-page滚到顶部',e);
			this.$emit('upperCall', e)
		},
		// 滚到底部
		lowerFn(e) {
			// console.log('page-page滚到底部',e);
			this.$emit('lowerCall', e)
		},
		// 监听滚动
		scrollFn(e) {
			this.$emit('scrollCall', e)
		}
	}
}
</script>

<style lang="scss">
.base-page {
    min-height: 480rpx;

    .center {
        flex: 1;
        overflow: hidden;
        position: relative;
    }

    .action {
        color: #999999;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
    }

    .tar-ativer {
        color: #000000;
        font-weight: 700;
        // background-image: -webkit-linear-gradient(bottom, red, #ff5f60, #f0c41b);
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
    }

    .tabbar-title {
        font-size: 36rpx;
    }
}
</style>
